<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-row>
                <el-col :span="8">咨询师名称：<el-input v-model="search.name" style="width: 240px" placeholder="请输入文章名称"
                        clearable /></el-col>
                <el-col :span="12">创建时间:
                    <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="起始日期"
                        end-placeholder="终止日期" />
                </el-col>
                <el-col :span="1"><el-button type="primary"
                        @click="sousuo(search.name, search.time)">搜索</el-button></el-col>
            </el-row>
        </el-col>
        <el-col :span="24" class="col"><el-button type="primary" @click="xinzeng">新增咨询师</el-button></el-col>

        <el-col :span="24" class="col">
            <el-table :data="areaList" border style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header" />
                <el-table-column prop="consultantName" label="咨询师名字" align="center" label-class-name="header" />
                <el-table-column prop="personalIntroduction" label="咨询师简介" align="center" label-class-name="header" />
                <!-- <el-table-column prop="id" label="咨询师id" align="center" label-class-name="header" /> -->
                <el-table-column prop="avatar" label="图片" align="center" label-class-name="header" >
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" :fit="fit" />
                    </template>
                </el-table-column>
                <el-table-column prop="consultantLevel.levelName" label="咨询师等级" align="center" label-class-name="header" />
                <el-table-column prop="address" label="地址" align="center" label-class-name="header" />
                <el-table-column label="领域" align="center" label-class-name="header" >
                    <template #default="item">
                        <div v-for="(item1,index) in item.row.consultantExcellences" :key="index">{{ item1.fieldOfExcellence.fieldName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="chakan(item.row)">查看所有信息</el-button>
                        <!-- <el-button type="text" @click="chakan(item.row)">查看所有信息</el-button> -->
                        <el-button type="text" @click="edite(item.row)">编辑</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table></el-col>

        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <EditeArea :form="form" @operate="operateAction" v-if="title == '编辑咨询师'" />
            <XinZeng v-if="title == '新增咨询师'" @operate="operateAction" />
            <ChaKan v-if="title == '查看所有信息'" :form="form"/>
        </el-dialog>
        <el-dialog v-model="shan" :title="title" width="380" destroy-on-close="true">
            <ShanChu v-if="title == '删除'" @operate="guanbi" :id="id" />
        </el-dialog>
    </el-row>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import axios from 'axios';
import EditeArea from './components/consultant/EditeArea.vue';
import XinZeng from './components/consultant/XinZeng.vue';
import ShanChu from './components/consultant/ShanChu.vue';
import ChaKan from './components/consultant/ChaKan.vue';

let res = null;
const search = reactive({
    nmae: null,
    time: null
});
//定义小区列表数据
let areaList = ref([]);
let show = ref(false);
let shan = ref(false);
let title = ref("");
let id = ref({});
let form = ref({});
const edite = function (data) {
    console.log("----------");
    console.log(data);
    show.value = true;
    title.value = "编辑咨询师";
    form.value = data;
}
const xinzeng = function () {
    show.value = true;
    title.value = "新增咨询师";
}

const del = function (item) {
    id.value = { id: item.id };
    shan.value = true;
    title.value = "删除";
}

const guanbi = function () {
    shan.value = false;
}

const chakan = function(row){
console.log(row.id);
form.value=row;

console.log(form.value);
show.value = true;
title.value = "查看所有信息";
}
const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;

    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}
const sousuo = async function (name, time) {
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=${starTime}&endTime=${endTime}&pageNum=1&pageSize=10&communityName=${name}`)
    areaList.value = res.data.data.list.map(item => {
        item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    });
    console.log(res);
}

const operateAction = async function (data) {
    if (data) {
        res = await axios.get("/api/consultant/findAll");
    console.log(res);
    areaList.value = res.data.data;
    }
    show.value = false;
}

//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("/api/consultant/findAll");
    console.log(res);
    areaList.value = res.data.data;
})
</script>

<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}

</style>